<template>
  <div id="app">
      <div class="box">
      <el-row :gutter='20'>
          <el-col :span='6'>
              <div class="bg1"></div>
          </el-col>
          <el-col :span='6'>
              <div class="bg2"></div>
          </el-col>
          <el-col :span='6'>
              <div class="bg3"></div>
          </el-col>
      </el-row>
      </div>
  </div>
</template>

<script>
export default {
    name:'App',
}
</script>

<style>
    *{
        width: 100vw;
        height: 100vh;
    }
</style>

<style lang='less'scoped>
    .box{
        width: 100vw;
        height: 100vh;
    }
    .bg1{
        height: 20px;
        width: 100%;
        background-color: blanchedalmond;
    }
    .bg2{
        height: 20px;
        width: 100%;
        background-color: red;
    }
    .bg3{
        height: 20px;
        width: 100%;
        background-color:blueviolet;
    }

</style>